<template>
	<view class="collect_block" v-if="hasLogin">
		<view class="collect_list" v-for="(item,index) in collectionMsg" :key="item.pro_pic_url" @click="goMsg(index)">
			<view class="list_img">
				<image :src="item.product_base_info.pro_pic_url"></image>
			</view>
			<view class="list_title">
				<view class="list_pro_title">
					{{ item.product_base_info.pro_title }}
				</view>
				<view class="list_country">
					<text class="iconfont icon-didian"></text>
					<text>{{ item.country }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			console.log(this.$store.state.hasLogin);
			if (!this.$store.state.hasLogin) {
				uni.showModal({
					title: "不可查看收藏内容",
					content: "登录才能查看收藏内容",
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/login/login",
							});
						}else {
							uni.navigateBack({
								delta:2
							})
						}
					},
				});
			}
		},
		data() {
			return {};
		},
		computed: {
		  collectionMsg() {
		    return this.$store.state.collectionMsg;
		  },
			hasLogin() {
				return this.$store.state.hasLogin
			}
		},
		methods: {
			goMsg(index){
				uni.navigateTo({
				 url:"/pages/item/item?id=" + this.collectionMsg[index].pro_id
				})
			}
		},
	};
</script>

<style scoped>
	uni-page-body {
		height: 100%;
		background-color: #f2f2f2;
	}

	.collect_block {
		width: 100%;
		min-height: 1200rpx;
		background-color: #f2f2f2;
		padding: 0 15rpx;
		box-sizing: border-box;
	}
	
	.collect_list {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px dashed #CBCACA;
	}
	
	.list_img {
		width: 240rpx;
		height: 140rpx;
		margin-right: 30rpx;
	}
	
	.list_img image{
		width: 240rpx;
		height: 140rpx;
	}
	
	.list_country {
		width: max-content;
		background: #e9e9e9;
		border-radius: 4rpx;
		margin-top: 18rpx;
		border-radius: 8rpx;
		padding: 4rpx 12rpx 4rpx 0;
		box-sizing: border-box;
		line-height: 1;
		color: #484848;
	}
	
	.list_country text,
	.list_country .iconfont {
		font-size: 24rpx;
		margin-left: 10rpx;
	}
</style>
